
<template>
    <div style="margin-bottom:20px">
        <el-button :class="{active:todolistStore.filter==='all'}" @click="setFilter('all')">全部</el-button>
        <el-button :class="{active:todolistStore.filter==='finish'}" @click="setFilter('finish')">已完成</el-button>
        <el-button :class="{active:todolistStore.filter==='unfinish'}" @click="setFilter('unfinish')">未完成</el-button>
    </div>
    <todoForm></todoForm>

    <todos></todos>
</template>
  
<script setup>
import { useTodolistStore } from '@/stores/todoList'
import todoForm from './todoForm.vue'
import todos from './todos.vue'

const todolistStore = useTodolistStore()
const setFilter = (val) => {
    // todolistStore.$patch({ filter: val })
    todolistStore.$state.filter = val
}
</script>

<style scoped lang="scss">
.active {
    color: green;
}
</style>